<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <title>Bata SCADA</title>
</head>
<nav>
  <div class="nav-wrapper">
    <a routerLink="/user-main" class="brand-logo center">Bata SCADA</a>
  </div>
</nav>
<br>
<br>
<h1 class="mat-headline-3 center-horizontal">Reports</h1>
<mat-tab-group>
  <mat-tab label="All alarms in time frame">
<!--    TABLE 1     -->
    <mat-form-field>
      <mat-label>Enter a date range</mat-label>
      <mat-date-range-input [formGroup]="range1" [rangePicker]="picker1">
        <input matStartDate formControlName="start" placeholder="Start date">
        <input matEndDate formControlName="end" placeholder="End date" (dateChange)="update1($event)">
      </mat-date-range-input>
      <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
      <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
      <mat-date-range-picker #picker1></mat-date-range-picker>
    </mat-form-field>
    <br>
    <br>
    <table mat-table [dataSource]="dataSource1" class="mat-elevation-z8" matSort >
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> Alarm Id </th>
        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
      </ng-container>

      <ng-container matColumnDef="tagName">
        <th mat-header-cell *matHeaderCellDef> Input Tag Name </th>
        <td mat-cell *matCellDef="let element"> {{element.tagName}} </td>
      </ng-container>

      <ng-container matColumnDef="limit">
        <th mat-header-cell *matHeaderCellDef> Limit </th>
        <td mat-cell *matCellDef="let element"> {{element.limit}} </td>
      </ng-container>

      <ng-container matColumnDef="value">
        <th mat-header-cell *matHeaderCellDef> Value </th>
        <td mat-cell *matCellDef="let element"> {{element.value}} </td>
      </ng-container>

      <ng-container matColumnDef="timestamp">
        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by date">
          Timestamp
        </th>
        <td mat-cell *matCellDef="let element"> {{element.timestamp.toLocaleString()}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns1"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns1;"></tr>
    </table>
  </mat-tab>
  <mat-tab label="All alarms with priority">
<!--  TABLE 2  -->
    <mat-form-field>
      <mat-label>Address</mat-label>
      <mat-select [(value)]="selected2" (selectionChange)="update2($event)">
        <mat-option *ngFor="let priority of priorities" [value]="priority">
          {{priority}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <table mat-table [dataSource]="dataSource2" class="mat-elevation-z8" matSort >

      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> Alarm Id </th>
        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
      </ng-container>

      <ng-container matColumnDef="tagName">
        <th mat-header-cell *matHeaderCellDef> Input tag name </th>
        <td mat-cell *matCellDef="let element"> {{element.tagName}} </td>
      </ng-container>

      <ng-container matColumnDef="limit">
        <th mat-header-cell *matHeaderCellDef> Limit </th>
        <td mat-cell *matCellDef="let element"> {{element.limit}} </td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef> Type </th>
        <td mat-cell *matCellDef="let element"> {{element.type}} </td>
      </ng-container>

      <ng-container matColumnDef="priority">
        <th mat-header-cell *matHeaderCellDef> Priority </th>
        <td mat-cell *matCellDef="let element"> {{element.priority}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns2;"></tr>
    </table>
  </mat-tab>
  <mat-tab label="Tag values in time frame">
<!--  TABLE 3  -->
    <mat-form-field>
      <mat-label>Enter a date range</mat-label>
      <mat-date-range-input [formGroup]="range3" [rangePicker]="picker3">
        <input matStartDate formControlName="start" placeholder="Start date">
        <input matEndDate formControlName="end" placeholder="End date" (dateChange)="update3($event)">
      </mat-date-range-input>
      <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
      <mat-datepicker-toggle matIconSuffix [for]="picker3"></mat-datepicker-toggle>
      <mat-date-range-picker #picker3></mat-date-range-picker>
    </mat-form-field>

    <table mat-table [dataSource]="dataSource3" class="mat-elevation-z8" matSort >

      <ng-container matColumnDef="tagName">
        <th mat-header-cell *matHeaderCellDef> Tag Name </th>
        <td mat-cell *matCellDef="let element"> {{element.tagName}} </td>
      </ng-container>

      <ng-container matColumnDef="address">
        <th mat-header-cell *matHeaderCellDef> Address </th>
        <td mat-cell *matCellDef="let element"> {{element.address}} </td>
      </ng-container>

      <ng-container matColumnDef="value">
        <th mat-header-cell *matHeaderCellDef> Value </th>
        <td mat-cell *matCellDef="let element"> {{element.value}} </td>
      </ng-container>

      <ng-container matColumnDef="timestamp">
        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by date">
          Timestamp
        </th>
        <td mat-cell *matCellDef="let element"> {{element.timestamp.toLocaleString()}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </mat-tab>
  <mat-tab label="Analog Tag last values">
<!--    TABLE 4   -->
    <table mat-table [dataSource]="dataSource4" class="mat-elevation-z8" matSort >

      <ng-container matColumnDef="tagName">
        <th mat-header-cell *matHeaderCellDef> Tag Name </th>
        <td mat-cell *matCellDef="let element"> {{element.tagName}} </td>
      </ng-container>

      <ng-container matColumnDef="address">
        <th mat-header-cell *matHeaderCellDef> Address </th>
        <td mat-cell *matCellDef="let element"> {{element.address}} </td>
      </ng-container>

      <ng-container matColumnDef="value">
        <th mat-header-cell *matHeaderCellDef> Value </th>
        <td mat-cell *matCellDef="let element"> {{element.value}} </td>
      </ng-container>

      <ng-container matColumnDef="timestamp">
        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by date">
          Timestamp
        </th>
        <td mat-cell *matCellDef="let element"> {{element.timestamp.toLocaleString()}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </mat-tab>
  <mat-tab label="Digital Tag last values">
<!--    TABLE 5   -->
    <table mat-table [dataSource]="dataSource5" class="mat-elevation-z8" matSort >

      <ng-container matColumnDef="tagName">
        <th mat-header-cell *matHeaderCellDef> Tag Name </th>
        <td mat-cell *matCellDef="let element"> {{element.tagName}} </td>
      </ng-container>

      <ng-container matColumnDef="address">
        <th mat-header-cell *matHeaderCellDef> Address </th>
        <td mat-cell *matCellDef="let element"> {{element.address}} </td>
      </ng-container>

      <ng-container matColumnDef="value">
        <th mat-header-cell *matHeaderCellDef> Value </th>
        <td mat-cell *matCellDef="let element"> {{element.value}} </td>
      </ng-container>

      <ng-container matColumnDef="timestamp">
        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by date">
          Timestamp
        </th>
        <td mat-cell *matCellDef="let element"> {{element.timestamp.toLocaleString()}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </mat-tab>
  <mat-tab label="All values tag with id">
<!--    DROPDOWN FOR TABLE 6-->
    <mat-form-field>
      <mat-label>Address</mat-label>
      <mat-select [(value)]="selected6" (selectionChange)="update6($event)">
        <mat-option *ngFor="let address of addresses" [value]="address">
          {{address}}
        </mat-option>
      </mat-select>
    </mat-form-field>
<!--  TABLE 6   -->
    <table mat-table [dataSource]="dataSource6" class="mat-elevation-z8" matSort >
      <ng-container matColumnDef="address">
        <th mat-header-cell *matHeaderCellDef> Address </th>
        <td mat-cell *matCellDef="let element"> {{element.address}} </td>
      </ng-container>

      <ng-container matColumnDef="value">
        <th mat-header-cell *matHeaderCellDef> Value </th>
        <td mat-cell *matCellDef="let element"> {{element.value}} </td>
      </ng-container>

      <ng-container matColumnDef="timestamp">
        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by date">
          Timestamp
        </th>
        <td mat-cell *matCellDef="let element"> {{element.timestamp.toLocaleString()}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns6"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns6;"></tr>
    </table>
  </mat-tab>
</mat-tab-group>
